<template>
  <div>
    <el-form ref="form" :model="form" >
      <el-form-item label="负荷数据类型:">
        <label slot="label" style="color: #ffffff;font-weight: bold">负荷数据类型:</label>
        <el-radio-group v-model="form.data_type" style="float: left;margin-top: 40px">
          <el-radio label="典型日" style="color: #ffffff"></el-radio>
          <!--<el-radio label="季节典型日" style="color: #ffffff"></el-radio>
          <el-radio label="12个月典型日" style="color: #ffffff"></el-radio>-->
        </el-radio-group>
      </el-form-item>
      <el-form-item label="负荷类型:" style="margin-top: -20px">
        <label slot="label" style="color: #ffffff;font-weight: bold">负荷类型:</label>
        <el-checkbox-group v-model="form.load_type" style="float: left;margin-top: 30px">
          <el-checkbox label="冷负荷" name="load_type" style="margin-left: 28px;color: #ffffff"></el-checkbox>
          <el-checkbox label="热负荷" name="load_type" style="margin-left: 28px;color: #ffffff"></el-checkbox>
          <el-checkbox label="电负荷" name="load_type" style="margin-left: 28px;color: #ffffff"></el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="负荷数据来源:" style="margin-top: -22px">
        <label slot="label" style="color: #ffffff;font-weight: bold">负荷数据来源:</label>
        <el-radio-group v-model="form.data_source" style="float: left;margin-top: 30px">
          <el-radio label="仿真负荷" style="color: #ffffff"></el-radio>
          <el-radio label="数据导入" style="color: #ffffff"></el-radio>
          <!--<el-button type="primary">地图选点</el-button>-->
          <el-upload  action="/iepsapi/upload"
                      :show-file-list="false"
                      :on-success="handleSuccess"
                      :before-upload="beforeUpload" style="float: right;margin-top: -15px">
            <el-button class="button-text" type="primary" style="margin-left: -11px">上传负荷数据</el-button>
          </el-upload>
        </el-radio-group>
      </el-form-item>
      <el-form-item >
        <el-button type="primary" style="float: right;margin-top: -200px" @click="save()">保存</el-button>
      </el-form-item>
    </el-form>
    <el-tabs v-model="activeName" @tab-click="handleClick" style="margin-top: -35px">
      <el-tab-pane label="电负荷" name="first">
        <label slot="label" style="color: #ffffff;font-weight: bold">电负荷</label>
        <div id="myChart1" style="width: 1100px;height: 260px;"></div>
      </el-tab-pane>
      <el-tab-pane label="冷负荷" name="second">
        <label slot="label" style="color: #ffffff;font-weight: bold">冷负荷</label>
        <div id="myChart2" style="width: 1100px;height: 260px;"></div>
      </el-tab-pane>
      <el-tab-pane label="热负荷" name="third">
        <label slot="label" style="color: #ffffff;font-weight: bold">热负荷</label>
        <div id="myChart3" style="width: 1100px;height: 260px;"></div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
  import axios from 'axios';
  export default {
    data () {
      return {
        activeName: 'first',
        electrical_load:[],
        cooling_load:[],
        heat_load: [],
        form: {
          data_type: '',
          load_type: [],
          data_source: ''
        },
        project_id: this.$root.project_id,
        path: "\\src\\main\\webapp\\resources",
      };
    },
    mounted() {
      this.drawLine();
    },
    created() {
      console.log("created");
      this.findLoadResult();
    },
    methods: {
      handleClick(tab, event){
        console.log(tab, event);
      },
      //上传成功提示
      handleSuccess(response, file) {
        if(response.flag){
          this.$message({
            message: response.message,
            type: 'success'
          });
          this.path=response.data;
        }else{
          this.$message.error(response.message);
        }
        console.log(response, file, fileList);
      },
      //保存
      save(){
        this.$refs['form'].validate((valid) => {
          if (this.project_id==0){
            this.$message.error("请选择当前项目！");
          } else if (this.form.data_type=="") {
            this.$message.error("请选择负荷数据类型！");
          }else if (this.form.load_type==""){
            this.$message.error("请选择负荷类型！");
          }else if (this.form.data_source==""){
            this.$message.error("请选择负荷数据来源！");
          }else{
            if(valid){
              this.$http.post('/iepsapi/planProgram/saveLoadData', {
                "project_id": this.project_id,
                "data_type": this.form.data_type,
                "load_type": this.form.load_type.join(","),
                "data_source": this.form.data_source,
                "path": this.path
              }).then((res) => {
                if (res.data.flag) {
                  this.$message({
                    type: 'success',
                    message: res.data.message
                  });
                } else {
                  this.$message.error(res.data.message);
                }
              });
            }}
        })
      },
      //校验是不是xls或xlsx
      beforeUpload(file){
        const isXLS = file.type === 'application/vnd.ms-excel';
        if(isXLS){
          return true;
        }
        const isXLSX = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
        if (isXLSX) {
          return true;
        }
        this.$message.error('上传文件只能是xls或者xlsx格式!');
        return false;
      },
      drawLine(){
        // 基于准备好的dom，初始化echarts实例
        let myChart1 = this.$echarts.init(document.getElementById('myChart1'))
        let myChart2 = this.$echarts.init(document.getElementById('myChart2'))
        let myChart3 = this.$echarts.init(document.getElementById('myChart3'))
        // 绘制图表
        myChart1.setOption({
          tooltip : {
            trigger : 'axis',
            formatter : function(params) {
              var result = params[0].name + '<br>';
              params.forEach(function(item) {
                result += '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + item.color + '"></span>';
                if (item.data != undefined && item.data != ""
                  && item.data != "-"
                  && item.data != "--"
                  && item.data != "'--'"
                  && item.data != "null") {
                  result += item.seriesName + ": " + '<span>'
                    + parseFloat(item.data).toFixed(2)
                    + "</span><br>"
                } else {
                  result += item.seriesName + ": " + '<span>'
                    + "-" + "</span><br>"
                }

              });

              return result;
            },
            axisPointer:{//指示线条颜色
              lineStyle:{
                color:'#ffffff',
              }
            }
          },
          grid : {
            left : '3%',
            right : '3%',
            bottom : '9%',
            top : '15%',
            containLabel : true
          },
          legend : {
            top : '3%',
            textStyle : {
              color : '#EBECF2' // 图例文字颜色
            },
            data : [ '逢时负荷(单位:千瓦)']
          },
          color : [ '#FFBB44', '#44E5FF', '#6FD088','#DD4B39', '#359CB6', '#1ABE67', '#F39C12', '#e03dda','#44e7ed'],
          xAxis : [ {
            type : 'category',
            boundaryGap : true,
            data : [ '0点', '1点', '2点', '3点', '4点', '5点', '6点', '7点', '8点',
              '9点', '10点', '11点', '12点', '13点', '14点', '15点', '16点',
              '17点', '18点', '19点', '20点', '21点', '22点', '23点' ],
            axisLine : { // 坐标轴线
              show : true, // 默认显示，属性show控制显示与否
              lineStyle : { // 属性lineStyle控制线条样式
                color : '#99A4C8',
                width : 2,
                type : 'solid'
              }
            },
            axisTick : {//刻度相关
              show : true,
              inside : true,//刻度朝内
            },
            axisLabel : {//字体
              show : true,
              color : '#EBECF2',
            },
            splitArea : {
              show : true,
              areaStyle : {//x轴背景区域分块
                color : [ 'rgba(250,250,250,0.1)',
                  'rgba(200,200,200,0)' ]
              },
            },
          } ],
          yAxis : [ {
            type : 'value',
            name : '',
            axisLine : { // 坐标轴线
              show : true, // 默认显示，属性show控制显示与否
              lineStyle : { // 属性lineStyle控制线条样式
                color : '#99A4C8',
                width : 2,
                type : 'solid'
              }
            },
            splitLine : {
              show : true,
              lineStyle : { // 属性lineStyle控制线条样式
                color : '#99A4C8',
                width : 2,
                type : 'solid'
              }
            },
            axisLabel : {//字体
              show : true,
              color : '#EBECF2',
            },
          } ],
          dataZoom: [{
            show: true,
            height:20,
            xAxisIndex: [0],
            bottom:15,

            "start": 20,
            "end": 80,
            handleSize: '110%',
            handleStyle: {
              color: "#409EFF",
            },
            textStyle:{
              color:"rgba(255,255,255,0.5)",
            },
            fillerColor:"rgba(64,158,255,0.2)",
            borderColor: "rgba(64,158,255,0.3)",

          }, {
            type: "inside",
            show: true,
            height: 15,
            start: 1,
            end: 35
          }],
          series : [ {
            name : '逢时负荷(单位:千瓦)' ,
            type : 'line',
            "connectNulls": true,   //将断点连接
            data : this.electrical_load,
            itemStyle : {
              normal : {
                lineStyle : {
                  width : 3,
                  type : 'solid'
                },
              }
            }
          } ]
        });
        myChart2.setOption({
          tooltip : {
            trigger : 'axis',
            formatter : function(params) {
              var result = params[0].name + '<br>';
              params.forEach(function(item) {
                result += '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + item.color + '"></span>';
                if (item.data != undefined && item.data != ""
                  && item.data != "-"
                  && item.data != "--"
                  && item.data != "'--'"
                  && item.data != "null") {
                  result += item.seriesName + ": " + '<span>'
                    + parseFloat(item.data).toFixed(2)
                    + "</span><br>"
                } else {
                  result += item.seriesName + ": " + '<span>'
                    + "-" + "</span><br>"
                }

              });

              return result;
            },
            axisPointer:{//指示线条颜色
              lineStyle:{
                color:'#ffffff',
              }
            }
          },
          grid : {
            left : '3%',
            right : '3%',
            bottom : '9%',
            top : '15%',
            containLabel : true
          },
          legend : {
            top : '3%',
            textStyle : {
              color : '#EBECF2' // 图例文字颜色
            },
            data : [ '逢时负荷(单位:千瓦)']
          },
          color : [ '#FFBB44', '#44E5FF', '#6FD088','#DD4B39', '#359CB6', '#1ABE67', '#F39C12', '#e03dda','#44e7ed'],
          xAxis : [ {
            type : 'category',
            boundaryGap : true,
            data : [ '0点', '1点', '2点', '3点', '4点', '5点', '6点', '7点', '8点',
              '9点', '10点', '11点', '12点', '13点', '14点', '15点', '16点',
              '17点', '18点', '19点', '20点', '21点', '22点', '23点' ],
            axisLine : { // 坐标轴线
              show : true, // 默认显示，属性show控制显示与否
              lineStyle : { // 属性lineStyle控制线条样式
                color : '#99A4C8',
                width : 2,
                type : 'solid'
              }
            },
            axisTick : {//刻度相关
              show : true,
              inside : true,//刻度朝内
            },
            axisLabel : {//字体
              show : true,
              color : '#EBECF2',
            },
            splitArea : {
              show : true,
              areaStyle : {//x轴背景区域分块
                color : [ 'rgba(250,250,250,0.1)',
                  'rgba(200,200,200,0)' ]
              },
            },
          } ],
          yAxis : [ {
            type : 'value',
            name : '',
            axisLine : { // 坐标轴线
              show : true, // 默认显示，属性show控制显示与否
              lineStyle : { // 属性lineStyle控制线条样式
                color : '#99A4C8',
                width : 2,
                type : 'solid'
              }
            },
            splitLine : {
              show : true,
              lineStyle : { // 属性lineStyle控制线条样式
                color : '#99A4C8',
                width : 2,
                type : 'solid'
              }
            },
            axisLabel : {//字体
              show : true,
              color : '#EBECF2',
            },
          } ],
          dataZoom: [{
            show: true,
            height:20,
            xAxisIndex: [0],
            bottom:15,

            "start": 20,
            "end": 80,
            handleSize: '110%',
            handleStyle: {
              color: "#409EFF",
            },
            textStyle:{
              color:"rgba(255,255,255,0.5)",
            },
            fillerColor:"rgba(64,158,255,0.2)",
            borderColor: "rgba(64,158,255,0.3)",

          }, {
            type: "inside",
            show: true,
            height: 15,
            start: 1,
            end: 35
          }],
          series : [ {
            name : '逢时负荷(单位:千瓦)' ,
            type : 'line',
            "connectNulls": true,   //将断点连接
            data : this.cooling_load,
            itemStyle : {
              normal : {
                lineStyle : {
                  width : 3,
                  type : 'solid'
                },
              }
            }
          } ]
        });
        myChart3.setOption({
          tooltip : {
            trigger : 'axis',
            formatter : function(params) {
              var result = params[0].name + '<br>';
              params.forEach(function(item) {
                result += '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + item.color + '"></span>';
                if (item.data != undefined && item.data != ""
                  && item.data != "-"
                  && item.data != "--"
                  && item.data != "'--'"
                  && item.data != "null") {
                  result += item.seriesName + ": " + '<span>'
                    + parseFloat(item.data).toFixed(2)
                    + "</span><br>"
                } else {
                  result += item.seriesName + ": " + '<span>'
                    + "-" + "</span><br>"
                }

              });

              return result;
            },
            axisPointer:{//指示线条颜色
              lineStyle:{
                color:'#ffffff',
              }
            }
          },
          grid : {
            left : '3%',
            right : '3%',
            bottom : '9%',
            top : '15%',
            containLabel : true
          },
          legend : {
            top : '3%',
            textStyle : {
              color : '#EBECF2' // 图例文字颜色
            },
            data : [ '逢时负荷(单位:千瓦)']
          },
          color : [ '#FFBB44', '#44E5FF', '#6FD088','#DD4B39', '#359CB6', '#1ABE67', '#F39C12', '#e03dda','#44e7ed'],
          xAxis : [ {
            type : 'category',
            boundaryGap : true,
            data : [ '0点', '1点', '2点', '3点', '4点', '5点', '6点', '7点', '8点',
              '9点', '10点', '11点', '12点', '13点', '14点', '15点', '16点',
              '17点', '18点', '19点', '20点', '21点', '22点', '23点' ],
            axisLine : { // 坐标轴线
              show : true, // 默认显示，属性show控制显示与否
              lineStyle : { // 属性lineStyle控制线条样式
                color : '#99A4C8',
                width : 2,
                type : 'solid'
              }
            },
            axisTick : {//刻度相关
              show : true,
              inside : true,//刻度朝内
            },
            axisLabel : {//字体
              show : true,
              color : '#EBECF2',
            },
            splitArea : {
              show : true,
              areaStyle : {//x轴背景区域分块
                color : [ 'rgba(250,250,250,0.1)',
                  'rgba(200,200,200,0)' ]
              },
            },
          } ],
          yAxis : [ {
            type : 'value',
            name : '',
            axisLine : { // 坐标轴线
              show : true, // 默认显示，属性show控制显示与否
              lineStyle : { // 属性lineStyle控制线条样式
                color : '#99A4C8',
                width : 2,
                type : 'solid'
              }
            },
            splitLine : {
              show : true,
              lineStyle : { // 属性lineStyle控制线条样式
                color : '#99A4C8',
                width : 2,
                type : 'solid'
              }
            },
            axisLabel : {//字体
              show : true,
              color : '#EBECF2',
            },
          } ],
          dataZoom: [{
            show: true,
            height:20,
            xAxisIndex: [0],
            bottom:15,

            "start": 20,
            "end": 80,
            handleSize: '110%',
            handleStyle: {
              color: "#409EFF",
            },
            textStyle:{
              color:"rgba(255,255,255,0.5)",
            },
            fillerColor:"rgba(64,158,255,0.2)",
            borderColor: "rgba(64,158,255,0.3)",

          }, {
            type: "inside",
            show: true,
            height: 15,
            start: 1,
            end: 35
          }],
          series : [ {
            name : '逢时负荷(单位:千瓦)' ,
            type : 'line',
            "connectNulls": true,   //将断点连接
            data : this.heat_load,
            itemStyle : {
              normal : {
                lineStyle : {
                  width : 3,
                  type : 'solid'
                },
              }
            }
          } ]
        });
      },
      findLoadResult(){
        this.$http.post("/iepsapi/dispatch/findLoadResult?project_id="+this.project_id).then((res)=>{
          if (res.data.flag) {
            this.cooling_load=res.data.data.cooling_load;
            this.heat_load=res.data.data.heat_load;
            this.electrical_load=res.data.data.electrical_load;
            this.drawLine();
          } else {
            this.$message.error(res.data.message);
          }
        });
      }
    }
  }
</script>
<style>

</style>
